<template>
	<view class="" style="background-color: #F8F8F8; overflow-x: hidden;">
		<view class="nav-back">
			<top-heigth :backTitle="backTitle"></top-heigth>
		</view>
		
		<uv-picker ref="picker" :columns="subway" @confirm="confirm"></uv-picker>
		
		<view class="content-box">
			<view class="public-box m-b16 m-t16">
				<!-- 未选地址 -->
				<view class="address-add" @click="goAddress()" v-if="!address">
					<uv-icon size="40rpx" name="/static/image/add.png" style="margin-right: 8rpx;"></uv-icon>
					<span>选择服务地址</span>
				</view> 
				<!-- 已选地址 -->
				<view class="address-add2" @click="goAddress()" v-else>
					<view class="address-add2-font">{{address.city}} {{address.district}} {{address.address}} {{address.detailAddress}}</view>
					<view class="font-hui">
						<span class="m-r16">{{address.nane}}</span>
						<span>{{address.phone}}</span>
					</view>
				</view>
			</view>
			
			<view class="public-box m-b16 m-t16" v-if="serverInfo">
				<view class="goods-box">
					<view class="goods order-confirm">
						<view class="img-box">
							<image class="img" :src="serverInfo.serviceImage" mode="aspectFit"></image>
						</view>
						<view class="goods-font">
							<h1 class="goods-h1">{{serverInfo.serviceName}}</h1>
							<view class="font-bottom">
								<view class="font-bottom-l">
									<view class="red">
										<span class="goods-span-red">¥</span>{{serverInfo.serviceAmount}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="public-box">
				<view>
					<view class="order-list">
						<view class="title">服务人员</view>
						<view class="order-list-r" @click="goPeople()">
							<!-- 未选之前 -->
							<view v-if="!staffInfo" class="order-list-font-hui">请选择</view>
							<!-- 选中后 -->
							<view v-else class="order-icon-choose">
								<view class="order-choose-img">
									<image src="/static/image/tab2.png" mode=""></image>
								</view>
								<span>{{staffInfo.staffName}}</span>
							</view>
							<uv-icon size="20" name="/static/image/more.png"></uv-icon>
						</view>
					</view>
					<view class="order-list" >
						<view class="title">服务时间</view>
						<view class="order-list-r" @click="goSelectTime">
							<!-- 未选之前 -->
							<view v-if="!serviceReservedTime" class="order-list-font-hui">请选择</view>
							<!-- 选中后 -->
							<view v-else class="order-icon-choose">
								<span class="order-yellow">{{serviceReservedTime}}</span>
							</view>
							<uv-icon size="20" name="/static/image/more.png"></uv-icon>
						</view>
					</view>
					<view class="order-list">
						<view class="title">优惠券</view>
						<view class="order-list-r" @click="goSelectCoupon">
							<!-- 未选之前 -->
							<view v-if="!couponInfo" class="order-list-font-hui">请选择</view>
							<!-- 选中后 -->
							<view v-else class="order-icon-choose">
								<span class="order-red">-¥{{couponInfo.tAppCouponVo.couponAmount}}</span>
							</view>
							<uv-icon size="20" name="/static/image/more.png"></uv-icon>
						</view>
					</view>
					<view class="order-list" @click="openPicker">
						<view class="title">出行方式</view>
						<view class="order-list-r">
							<view class="order-icon-choose">
								{{['出租车', '地铁公交'][wayType - 1]}}
							</view>
							<uv-icon size="20" name="/static/image/more.png"></uv-icon>
						</view>
					</view>
					<template v-if="wayInfo">
						<view class="order-list" style="padding-bottom: 6rpx;">
							<view class="title">交通费</view>
							<view class="order-list-r">
								<view class="order-list-font-hui" style="color: #333;">{{wayInfo.amount}}元</view>
							</view>
						</view>
						<view class="font-hui" style="padding-bottom: 20rpx;">{{subwayDesc}}</view>
					</template>
					
					<view class="order-list">
						<view class="title">备注</view>
					</view>
					<uv-textarea class="text-box" border="none" v-model="remark" placeholder="请输入内容"></uv-textarea>
					
				</view>
			</view>
			
		</view>
		
		<view class="goods-buy">
			<view class="goods-buy-box">
				<view class="goods-buy-icon">
					<span>合计：</span>
					<view class="red">
						<span class="goods-span-red">¥</span>{{totalPrice}}
					</view>
				</view>
				<!-- <view class="goods-buy-red" @click="goPay2()">去下单</view> -->
				<view class="goods-buy-red" @click="goPay()">去支付</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import TopHeigth from '@/components/TopHeigth.vue'
	import { checkLogin } from "@/util/checkLogin.js"
	
	export default {
		data() {
			return {
				backTitle:"订单确认",
				serviceId: 0,
				serverInfo: null,
				staffId: 0,
				staffInfo: null,
				userInfo: uni.getStorageSync('userInfo'),
				address: null,
				couponInfo: null,
				serviceReservedTime: null,
				remark: '',
				wayType: 1,
				subway: [
					['出租车'] // '地铁公交'
				],
				subwayDesc: '',
				wayInfo: null,
				totalPrice: 0,
				parentStaffId: 0
			}
		},
		components: { TopHeigth },
		onLoad(e) {
			checkLogin(() => {
				this.serviceId = e.id;
				this.staffId = e.sid;
				this.parentStaffId = e.psid;
				
				// 获取默认地址
				uni.$u.http.post('/api/shop/v1_0/tAppUserAddressRCA/queryTAppUserAddress',{
					appUserId: this.userInfo.id,
				}).then((res) => {
					 if(res.aaData){
						 this.address = res.aaData[0]
						 this.jiaotongAmount()
					 }
				})
				// 获取服务
				uni.$u.http.post('/api/shop/v1_0/tAppServiceRCA/turnTAppServiceInfo',{
					id: this.serviceId
				}).then((res) => {
					 this.serverInfo = res.data
					 this.initPrice()
				})
				
				// 获取服务人员
				if(this.staffId > 0){
					uni.$u.http.post('/api/shop/v1_0/tAppStaffRCA/turnTAppStaffInfo',{
						id: this.staffId
					}).then((res) => {
						this.staffInfo = res.data
					})
				}
			})
		},
		onShow() {
			uni.$once('selectAddress', (address) => {
				this.address = address
				this.wayType = 1
				this.jiaotongAmount()
			})
			uni.$once('selectDate', (time) => {
				this.serviceReservedTime = time
				this.jiaotongAmount()
			})
			uni.$once('selectCoupon', (coupon) => {
				// 验证满减
				if(this.serverInfo.serviceAmount < coupon.tAppCouponVo.couponLimitAmount){
					return this.$refs.uToast.show({
						type: 'default',
						message: "未达到满减条件",
					})
				}
				this.couponInfo = coupon
				this.initPrice()
			})
			uni.$once('selectStaff', (staff) => {
				this.staffId = staff.id
				this.staffInfo = staff
				this.wayType = 1
				this.jiaotongAmount()
			})
		},
		methods: {
			openPicker() {
				this.$refs.picker.open();
			},
			confirm(e) {
				this.wayType = e.indexs[0] + 1
				this.jiaotongAmount()
			},
			goPay2(){
				if(!this.serviceId){
					return uni.showToast({
						title: "缺少服务",
						icon: 'none'
					})
				}
				if(!this.address){
					return uni.showToast({
						title: "请选择地址",
						icon: 'none'
					})
				}
				if(!this.staffId){
					return uni.showToast({
						title: "请选择服务人员",
						icon: 'none'
					})
				}
				if(!this.serviceReservedTime){
					return uni.showToast({
						title: "请选择服务时间",
						icon: 'none'
					})
				}
				if(!this.wayInfo){
					return uni.showToast({
						title: "请选择出行方式",
						icon: 'none'
					})
				}
				// 去支付
				uni.$u.http.post('/api/shop/v1_0/tAppOrderRCA/insertTAppOrder',{
					serviceId:this.serverInfo.id,
					supplierId: this.staffInfo.supplierId,
					staffId:this.staffInfo.id,
					parentStaffId: this.parentStaffId,
					couponId: this.couponInfo ? this.couponInfo.tAppCouponVo.id : null,
					couponUserId: this.couponInfo ? this.couponInfo.id : null,
					serviceReservedTime: this.serviceReservedTime,
					userName: this.address.nane,
					userMobile: this.address.phone,
					addressId: this.address.id,
					userAddress: this.address.address + this.address.detailAddress,
					userLng: this.address.lng,
					userLat: this.address.lat,
					orderRemark: this.remark,
					postAmount: this.wayInfo.amount,
					postType: this.wayType,
					orderStatus: 0
				}).then((res) => {
					if(res.code != 200){
						return uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
					uni.navigateTo({
						url: "/pages/order/payType?code="+res.data.orderCode+"&sign=1"
					})
				})
			},
			goPay(){
				if(!this.serviceId){
					return uni.showToast({
						title: "缺少服务",
						icon: 'none'
					})
				}
				if(!this.address){
					return uni.showToast({
						title: "请选择地址",
						icon: 'none'
					})
				}
				if(!this.staffId){
					return uni.showToast({
						title: "请选择服务人员",
						icon: 'none'
					})
				}
				if(!this.serviceReservedTime){
					return uni.showToast({
						title: "请选择服务时间",
						icon: 'none'
					})
				}
				if(!this.wayInfo){
					return uni.showToast({
						title: "请选择出行方式",
						icon: 'none'
					})
				}
				// 去支付
				uni.$u.http.post('/api/shop/v1_0/tAppOrderRCA/insertTAppOrder',{
					serviceId:this.serverInfo.id,
					supplierId: this.staffInfo.supplierId,
					staffId:this.staffInfo.id,
					parentStaffId: this.parentStaffId,
					couponId: this.couponInfo ? this.couponInfo.tAppCouponVo.id : null,
					couponUserId: this.couponInfo ? this.couponInfo.id : null,
					serviceReservedTime: this.serviceReservedTime,
					userName: this.address.nane,
					userMobile: this.address.phone,
					addressId: this.address.id,
					userAddress: this.address.address + this.address.detailAddress,
					userLng: this.address.lng,
					userLat: this.address.lat,
					orderRemark: this.remark,
					postAmount: this.wayInfo.amount,
					postType: this.wayType
				}).then((res) => {
					if(res.code != 200){
						return uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
					uni.navigateTo({
						url:"/pages/order/pay?code=" + res.data.orderCode
					})
				})
			},
			goAddress(){
				uni.navigateTo({
					url:"/pages/order/address?sign=1"
				})
			},
			goSelectTime(){
				if(!this.staffInfo){
					return uni.showToast({
						title: "请选择服务人员",
						icon: 'none'
					})
				}
				uni.navigateTo({
					url:"/pages/order/time?staff=" + this.staffInfo.id
				})
			},
			goPeople(){
				if(!this.address){
					return uni.showToast({
						title: "请选择地址",
						icon: 'none'
					})
				}
				uni.navigateTo({
					url:"/pages/order/people?sid=" + this.serviceId + "&aid=" + this.address.id
				})
			},
			goSelectCoupon(){
				uni.navigateTo({
					url:"/pages/mine/myCoupon?sign=1"
				})
			},
			// 计算交通费
			jiaotongAmount(){
				if(!this.address || !this.staffId){
					return;
				}
				uni.$u.http.post('/api/shop/v1_0/tAppOrderRCA/postAmountV2',{
					postType: this.wayType,
					userLat: this.address.lat,
					userLng: this.address.lng,
					staffId: this.staffId,
					serviceReservedTime: this.serviceReservedTime
				}).then((res) => {
					this.wayInfo = res.data
					if(this.wayInfo.hasSubWay){
						this.subway = [
							['出租车', '地铁公交']
						]
					}else{
						this.subway = [
							['出租车']
						]
					}
					this.subwayDesc = this.wayInfo.desc
					this.initPrice()
				})
			},
			initPrice(){
				this.totalPrice = this.serverInfo.serviceAmount*1;
				if(this.couponInfo){
					this.totalPrice = this.totalPrice - this.couponInfo.tAppCouponVo.couponAmount*1
				}
				if(this.wayInfo){
					this.totalPrice = this.totalPrice + this.wayInfo.amount*1
				}
				if(this.totalPrice < 0){
					this.totalPrice = 0.01
				}
				this.totalPrice = (this.totalPrice*1).toFixed(2)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/common/css/public.scss";
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
	
	.address-add{
		@include flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 30rpx;
		color: #333;
	}
	.address-add2{
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		.address-add2-font{
			margin-bottom: 20rpx;
		}
	}
	.order-confirm{
		padding: 0 !important;
		.img-box{
			width:120rpx;
			height: 120rpx;
			border-radius:20rpx;
			margin-right: 24rpx;
			overflow: hidden;
			.img{
				width: 120rpx;
				height: 120rpx;
			}
		}
	}
	
	.order-list{
		width: 100%;
		@include flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
		.font{
			font-size: 30rpx;
			color: #333333;
		}
	}
	.order-list-r{
		@include flex;
		align-items: center;
		justify-content: end;
		font-size:28rpx;
	}
	.order-list-font-hui{
		font-size:28rpx;
		color: #999;
	}
	.text-box{
		background: #F8F8F8;
	}
	
	
	.goods-buy{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		box-shadow: 0 10rpx 30rpx 5rpx rgba(0,0,0,0.5);
		
	}
	.goods-buy-box{
		height: 100rpx;
		padding: 0 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.goods-buy-red{
		background:#EB0C00;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
		width: 284rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
	}
	.goods-buy-icon{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size:20rpx;
		color: #555252;
		.red{
			color: #F82727;
			font-size: 34rpx;
			font-weight: bold;
			margin-right: 16rpx;
		}
		
	}
	.order-icon-choose{
		@include flex;
		align-items: center;
		justify-content: end;
		font-size: 28rpx;
		.order-choose-img{
			display: flex;
			align-items: center;
			justify-content: center;
			width:40rpx;
			height: 40rpx;
			border-radius: 40rpx;
			overflow: hidden;
			margin-right: 16rpx;
			image{
				width:40rpx;
				height: 40rpx;
			}
		}
	}
	.order-yellow{
		color: #01B88C;
		margin-left:10rpx;
		font-size: 28rpx;
	}
	.order-red{
		color: #EB0C00;
		font-size: 28rpx;
	}
</style>
